<template>
  <div class="value-table">
    <!-- 多表头表体 -->
    <table
      ref="valuetable"
      class="editTableBlock"
    >
      <tr v-for="(x, xindex) in edit.lastDataCol" :key="xindex">
        <td
          v-for="(y, yindex) in edit.lastDataRow"
          :key="xindex + '_' + yindex"
          :class="tableData[xindex + '__' + yindex].disabledCss"
          :data-key= "xindex + '__' + yindex"
          :data-yindex= "yindex"
          :data-xindex= "xindex"
          @click="highlightCross"
        >
          <div v-if="tableData[xindex + '__' + yindex].existingRelationIcon ||tableData[xindex + '__' + yindex].existingRelationNumber">
            <img v-if="tableData[xindex + '__' + yindex].existingRelationIcon" :src="tableData[xindex + '__' + yindex].existingRelationIcon" >
            <div v-if="tableData[xindex + '__' + yindex].existingRelationNumber" class="valueNumber">{{tableData[xindex + '__' + yindex].existingRelationNumber}}</div>
          </div>
        </td>
      </tr>
    </table>

  </div>
</template>

<script>
export default {
  inject: ['edit'],
  props: {
    tableData: [Object, Array],
  },

  data() {
    return {
      //// tdStyle: {
      ////   width: this.edit.headColWidth + 'px',
      ////   height: this.edit.tableTdHeight + 'px',
      ////   textAlign: 'center',
      //// },
    };
  },
  watch: {
    //// tableData: {
    ////   immediate: true,
    ////   deep: true,
    ////   handler(val) {
    ////     this.tableData = val;
    ////   },
    //// }
  },
  created(){
    console.time('valuetable');
    console.log('valuetable');
  },
  mounted(){ console.timeEnd('valuetable'); },
  beforeUpdate(){
    console.time('valuetableUpdate');
    console.log('valuetableUpdate');
  },
  updated(){ console.timeEnd('valuetableUpdate'); },
  methods: {
    resetCross(){
      this.$refs.valuetable.querySelectorAll('.treeCellHighlight').forEach((item) => {
        item.classList.toggle('treeCellHighlight');
      });
      this.$refs.valuetable.querySelectorAll('.treeCellSelectHighlight').forEach((item) => {
        item.classList.toggle('treeCellSelectHighlight');
      });
    },
    highlightCross(e) {
      //// 1 消除原有点击状态
      //// 2 纵横选中状态叠加

      let tdNode = e.currentTarget;
      this.$parent.selectedHeadX = this.tableData[tdNode.dataset.key].keyX;
      this.$parent.selectedHeadY = this.tableData[tdNode.dataset.key].keyY;
      console.log(this.$parent.selectedHeadX, this.$parent.selectedHeadY, 'this.$parent.selectedHeadX this.$parent.selectedHeadY');
      this.$refs.valuetable
        .querySelectorAll('.treeCellHighlight')
        .forEach((item) => {
          item.classList.toggle('treeCellHighlight');
        });      
      this.$parent.$refs.editTableWrapper.querySelectorAll('.headtable .treeCellHighlight').forEach(item => {
        item.classList.toggle('treeCellHighlight');
      });

      let clickCurent = false;
      this.$refs.valuetable
        .querySelectorAll('.treeCellSelectHighlight')
        .forEach((item) => {
          //// 获取td节点

          if (item === tdNode) {
            console.log('再次点击 还原');
            this.$parent.selectedHeadX = null;
            this.$parent.selectedHeadY = null;
            clickCurent = true;
          }
          item.classList.toggle('treeCellSelectHighlight');
        });
      if (clickCurent){
        return;
      } else {

      }

      tdNode.classList.toggle('treeCellSelectHighlight');
      tdNode.parentNode.classList.toggle('treeCellHighlight');
      if (tdNode.cellIndex) {
        this.$refs.valuetable
          .querySelectorAll(`td:nth-child(${tdNode.cellIndex + 1})`)
          .forEach((item) => {
            item.classList.toggle('treeCellHighlight');
          });
      } else {
        console.log(tdNode, 'cellNode');
      }
    },
  },
};
</script>

<style lang="scss">
.value-table {
	height: 676px;
	table {
		table-layout: fixed;
		width: 100%;
	}
	.el-table td {
		padding: 0 !important;
		height: 32px;
		line-height: 26px;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.el-table th {
		padding: 0 !important;
		height: 32px;
		line-height: 26px;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.el-table .cell {
		padding: 0;
  }
	.el-input__inner {
		border: 0;
		background: transparent;
	}
}

//// }
</style>
